<template>
	<a-spin :spinning="loading">
		<a-card>
			<section slot="title">宠物类目</section>
			<a-row :gutter="16">
				<a-col :span="5">
					<span class="label">分类名称：</span>
					<a-input :max-length="100" allow-clear v-model="name" placeholder="请输入分类名称" />
				</a-col>


				<a-col :span="8">
					<a-button class="ml-18" type="primary" @click="search">查询</a-button>
					<a-button class="mx-8" @click="reset">重置</a-button>
					<a-button @click="getEdit" class="mx-8" type="primary">新增</a-button>
					<a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>
				</a-col>
			</a-row>
			<a-table style="display: none" bordered id="tableExport" class="mt-16 order-table" :columns="columns"
				:data-source="data" :scroll="scroll" :pagination="pagination">
				<template #status="status, data">
					{{ data.status == 0 ? '已上架' : '下架' }}
				</template>
				<template #createTime="createTime, data">
					{{ $utils.formatTimestamp(data.createTime) }}
				</template>


			</a-table>
			<a-table class="mt-16 order-table" :columns="columns" :data-source="data" :scroll="scroll"
				:pagination="pagination">
				<template #status="status, data">
					{{ data.status == 0 ? '已上架' : '下架' }}
				</template>
				<template #createTime="createTime, data">
					{{ $utils.formatTimestamp(data.createTime) }}
				</template>

				<template #action="action, data">
					<div class="flex items-center justify-center">
						<a-button @click="getEdit(data, '编辑')" class="mr-10" type="primary"
							v-if="data.parentName == ''">
							编辑
						</a-button>
						<a-button @click="getEdit(data, '编辑子')" class="mr-10" type="primary" v-else>
							编辑
						</a-button>
						<!-- <a-button @click="goCharts(data)" style="background: 	#32CD32;" type="primary">
							查看
						</a-button> -->
						<a-button @click="delect(data)" class="ml-10 mr-10" type="danger">
							删除
						</a-button>
						<a-button v-if="data.parentName == ''" style="background: 	#DAA520;"
							@click="getEdit(data, '子')" class="ml-10 mr-10" type="danger">
							新建子类
						</a-button>
						<!-- <a-button style="background-color: #FFD700;" type="primary">
              重置
            </a-button> -->
					</div>
				</template>

			</a-table>
			<!-- <a-divider  /> -->
		</a-card>
		<particulars ref="particulars"></particulars>
		<create @upload="upload" ref="create"></create>
	</a-spin>
</template>
<script>
	import FileSaver from 'file-saver'
	import * as XLSX from 'xlsx'
	import create from './components/create.vue'
	import particulars from './components/particulars'
	import {
		categoryPage,
		categoryDelete
	} from '@/api/newPet'
	import {
		tableMixins
	} from '@/utils/mixins'
	export default {
		mixins: [tableMixins],
		components: {
			particulars,
			create
		},
		data() {
			return {
				loading: false,
				name: '', //分类名称
				data: [{
					id: 1111,
					travellerName: '',
					status: 1
				}],
				columns: [{
						title: '序号',
						dataIndex: 'sortNumb',
						align: 'center',
						scopedSlots: {
							customRender: 'sortNumb'
						}
					},
					{
						title: '类目名称',
						dataIndex: 'name',

						align: 'center',
						scopedSlots: {
							customRender: 'name'
						},
					},
					{
						title: '父级分类',
						dataIndex: 'parentName',

						align: 'center',
						scopedSlots: {
							customRender: 'parentName'
						},
					},
					{
						title: '状态',
						dataIndex: 'status',
						align: 'center',
						scopedSlots: {
							customRender: 'status'
						}
					},
					{
						title: '发布时间',
						dataIndex: 'createTime',

						align: 'center',
						scopedSlots: {
							customRender: 'createTime'
						},
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				],

			}
		},
		computed: {

		},
		watch: {

		},
		async created() {

		},
		mounted() {
			this.search()
		},
		methods: {
			exportTable() { //导出
				let et = XLSX.utils.table_to_book(document.querySelector('#tableExport'));
				let etout = XLSX.write(et, {
					bookType: 'xlsx',
					bookSST: true,
					type: 'array'
				});
				try {
					FileSaver.saveAs(new Blob([etout], {
						type: 'application/octet-stream'
					}), '宠物类目.xlsx');
				} catch (e) {
					console.log(e, etout);
				}
				return etout;
			},
			search() {
				this.pageNum = 1
				this.getData()
			},
			upload() {
				this.search()
			},
			delect(data) {
				this.$confirm({
					title: '删除',
					content: `请确认是否删除该条信息`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk: () => {
						console.log('删除')
						this.loading = true
						categoryDelete({
								id: data.id
							})
							.then((res) => {
								this.$message.success('删除成功！')

								this.search()

								this.loading = false
							})
							.finally(() => (this.loading = false))

					},
				})
			},
			goCharts(data) {
				this.$refs.particulars.open(data)
			},
			getEdit(data, name) {
        
				data.isPerson = name
				this.$refs.create.open(data)
			},
			getSearchParams() {
				console.log(this.vendorId);
				return {
					pageNo: this.pageNum,
					pageSize: this.rowsNum,
					name: this.name
				}
			},
			getData() {
				this.loading = true
				categoryPage(this.getSearchParams()).then(data => {
					this.total = data.total
					this.data = data.list
					console.log(data, '111')
				}).finally(() => this.loading = false)
			},
			reset() {
				this.search()
				this.name = ''
			}
		}
	}
</script>
<style lang="less" scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 86px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>